---
title: 事件
authors: Hypoxia
date: 2025.3.30
---

> 组件编写交互逻辑的方式

### React 事件

```tsx
function App() {
  function onClick(event) {
    console.log("点击", event);
  }

  return <div onClick={onClick}>Hello World</div>;
}
```

1. React 事件通过 html 标签的 props 绑定，可以实现 DOM 事件相同的功能
2. 事件处理函数需在最外层，且接收事件对象 event 作为参数

### 自定义事件

```tsx
function Input({ change }) {
  function onChange(event) {
    change(event.target.value);
  }

  return <input onChange={onChange} />;
}
function App() {
  function change(value) {
    console.log("点击", value);
  }

  return <Input change={change} />;
}
```

1. 自定义事件是组件基于 React 事件定义的事件
2. 自定义事件可自定义参数，传递给事件处理函数

### 思考